<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:hh="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" >
    <link rel="stylesheet" href="/css/style.css">
</head>
<!--导航-->
<div th:fragment="menu(n)" class="ui top attached segment">
    <div class="ui container">
        <div class="ui secondary menu">
            <div class="ui pointing dropdown link item" style="background-color: #f5eaf1" th:attr="style=${n<=4 ? 'background-color:#bef5d0' : 'background-color: #f5eaf1'}">
                <span class="text">系统管理</span>
                <i class="dropdown icon"></i>
                <div class="menu m-opacity-mini">
                    <a class="item" th:href="@{/main}"  data-value="用户管理" th:classappend="${n==1} ? 'active'">用户管理</a><div class="ui divider"></div>
                    <a class="item" th:href="@{/role}" data-value="角色管理" th:classappend="${n==2} ? 'active'">角色管理</a><div class="ui divider"></div>
                    <a class="item" data-value="系统日志" th:classappend="${n==3} ? 'active'">系统日志</a><div class="ui divider"></div>
                    <a class="item" th:href="@{/permission}" data-value="权限管理" th:classappend="${n==4} ? 'active'">权限管理</a>
                </div>
            </div>
            <div class="ui pointing dropdown link item" style="background-color: #f5eaf1" th:attr="style=${n>4 ? ( n<8 ? 'background-color:#bef5d0' : 'background-color:#f5eaf1' ) : 'background-color:#f5eaf1'}">
              <span class="text">课程模块</span>
              <i class="dropdown icon"></i>
               <div class="menu m-opacity-mini">
                  <a class="item" th:href="@{/course}" data-value="课程管理" th:classappend="${n==5} ? 'active'">课程管理</a><div class="ui divider"></div>
                  <a class="item" data-value="课程变更申请" th:classappend="${n==6} ? 'active'">课程变更申请</a><div class="ui divider"></div>
                  <a class="item" data-value="课程信息呈现" th:classappend="${n==7} ? 'active'">课程信息呈现</a>
                </div>
            </div>
            <div class="ui pointing dropdown link item" style="background-color: #f5eaf1" th:attr="style=${n>7 ? ( n<10 ? 'background-color:#bef5d0' : 'background-color:#f5eaf1' ) : 'background-color:#f5eaf1'}">
                <span class="text">课程类目模块</span>
                <i class="dropdown icon"></i>
                <div class="menu m-opacity-mini">
                    <a class="item" data-value="课程类目管理" th:classappend="${n==8} ? 'active'">课程类目管理</a><div class="ui divider"></div>
                    <a class="item" data-value="课程类目呈现" th:classappend="${n==9} ? 'active'">课程类目呈现</a>
                </div>
            </div>
            <div class="ui pointing dropdown link item" style="background-color: #f5eaf1" th:attr="style=${n>9 ? ( n<13 ? 'background-color:#bef5d0' : 'background-color:#f5eaf1' ) : 'background-color:#f5eaf1'}">
                <span class="text">资源模块</span>
                <i class="dropdown icon"></i>
                <div class="menu m-opacity-mini">
                    <a class="item" data-value="评论/评分" th:classappend="${n==10} ? 'active'">评论/评分</a><div class="ui divider"></div>
                    <a class="item" data-value="敏感词管理" th:classappend="${n==11} ? 'active'">敏感词管理</a><div class="ui divider"></div>
                    <a class="item" th:href="@{/resource}" data-value="资源管理" th:classappend="${n==12} ? 'active'">资源管理</a>
                </div>
            </div>
            <div class="ui pointing dropdown link item" style="background-color: #f5eaf1" th:attr="style=${n==13 ? 'background-color:#bef5d0' : 'background-color: #f5eaf1'}">
                <span class="text">线下课程模块</span>
                <i class="dropdown icon"></i>
                <div class="menu m-opacity-mini">
                    <a class="item" data-value="线下课程管理" th:classappend="${n==13} ? 'active'">线下课程管理</a>
                </div>
            </div>
        </div>
    </div>
</div>